<template>
    <header class="header">
        count: {{count}}
    </header>

    <main class="main">
        <nav>
            <ul class="side-nav">
                <li v-link="{path: '/home', activeClass: 'active'}"><a href>Home</a></li>
                <li v-link="{path: '/about', activeClass: 'active'}"><a href>About</a></li>
                <li v-link="{path: '/vuex', activeClass: 'active'}"><a href>Vuex</a></li>
            </ul>
        </nav>

        <div class="container">
            <router-view></router-view>
        </div>
    </main>
</template>

<script>
    import store from '../js/store';
    import getters from '../js/getters';


    export default {
        store,
        vuex: {
            getters: {
                count: getters.getCount
            }
        }
    };
</script>

<style>
    .header {
        top: 0;
        height: 65px;
        width: 100%;
        background: #ee6e73;
        color: #fff;
    }

    .main {
        flex: auto;
        display: flex;
    }

    .main > nav {
        width: 300px;
        box-shadow: 1px 0 2px rgba(0, 0, 0, .3);
    }

    .main > .container {
        flex: auto;
        padding: 15px;
    }

    .side-nav {
        margin: 0;
        padding: 0;
    }

    .side-nav li {
        float: none;
        line-height: 48px;
        list-style-type: none;
        transition: all .3s;
        will-change: background;
    }

    .side-nav li a {
        font-size: 13px;
        line-height: 44px;
        height: 44px;
        padding: 0 30px;
        display: block;
        color: rgba(0, 0, 0, 0.87);
        font-weight: bold;
    }

    .side-nav li.active,
    .side-nav li a:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }

    a {
        text-decoration: none;
    }
</style>
